<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <title>${product.productName} - 商品详情</title>
    <!-- import CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/vue-index.css"/>
    <style>
        /* 容器样式 */
        .product-container {
            padding: 20px;
            background-color: #f5f5f5;
            min-height: 100vh;
        }
        
        /* 商品详情样式 */
        .product-detail {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
        }
        
        /* 商品图片样式 */
        .product-image {
            width: 400px;
            height: 400px;
            overflow: hidden;
            margin-right: 30px;
            border: 1px solid #eee;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 商品信息样式 */
        .product-info {
            flex: 1;
            min-width: 300px;
        }
        
        .product-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .product-code {
            font-size: 14px;
            color: #999;
            margin-bottom: 15px;
        }
        
        .product-price {
            font-size: 28px;
            color: #ff6700;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .product-spec {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .product-category {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .product-unit {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .product-actions {
            margin-top: 30px;
        }
        
        /* 商品描述样式 */
        .product-description {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .description-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .description-content {
            font-size: 14px;
            color: #666;
            line-height: 1.8;
        }
        
        /* 相关推荐样式 */
        .related-products {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .related-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 商品列表样式 */
        .product-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        /* 商品卡片样式 */
        .product-card {
            width: calc(25% - 20px);
            margin: 10px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
        }
        
        /* 商品卡片图片样式 */
        .card-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s;
        }
        
        .product-card:hover .card-image img {
            transform: scale(1.05);
        }
        
        /* 商品卡片信息样式 */
        .card-info {
            padding: 15px;
        }
        
        .card-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .card-price {
            font-size: 18px;
            color: #ff6700;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .card-spec {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
            height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 响应式布局 */
        @media screen and (max-width: 1200px) {
            .product-card {
                width: calc(33.33% - 20px);
            }
        }
        
        @media screen and (max-width: 768px) {
            .product-image {
                width: 100%;
                height: 300px;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .product-card {
                width: calc(50% - 20px);
            }
        }
        
        @media screen and (max-width: 480px) {
            .product-card {
                width: calc(100% - 20px);
            }
        }
    </style>
</head>
<body>
<div id="app" class="product-container">
    <!-- 商品详情 -->
    <div class="product-detail">
        <div class="product-image">
            <img :src="product.imageUrl || 'static/images/default-product.jpg'" alt="商品图片">
        </div>
        <div class="product-info">
            <div class="product-name">{{product.productName}}</div>
            <div class="product-code">商品编码：{{product.productCode}}</div>
            <div class="product-category">分类：{{product.categoryName}}</div>
            <div class="product-spec">规格：{{product.specification}}</div>
            <div class="product-unit">单位：{{product.unit}}</div>
            <div class="product-price">¥ {{product.price}}</div>
            <div class="product-actions">
                <el-button type="primary" size="medium">加入购物车</el-button>
                <el-button type="danger" size="medium">立即购买</el-button>
            </div>
        </div>
    </div>

    <!-- 商品描述 -->
    <div class="product-description">
        <div class="description-title">商品描述</div>
        <div class="description-content">{{product.description || '暂无商品描述'}}</div>
    </div>

    <!-- 相关推荐 -->
    <div class="related-products" v-if="relatedProducts.length > 0">
        <div class="related-title">相关推荐</div>
        <div class="product-list">
            <div class="product-card" v-for="item in relatedProducts" :key="item.id" @click="goToDetail(item.id)">
                <div class="card-image">
                    <img :src="item.imageUrl || 'static/images/default-product.jpg'" alt="商品图片">
                </div>
                <div class="card-info">
                    <div class="card-name">{{item.productName}}</div>
                    <div class="card-spec">{{item.specification}}</div>
                    <div class="card-price">¥ {{item.price}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="static/js/owner/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="static/js/owner/vue.js"></script>
<!-- import JavaScript -->
<script src="static/js/owner/vue-index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                productId: null,
                product: {},
                relatedProducts: []
            }
        },
        created() {
            // 从URL获取商品ID
            const pathArray = window.location.pathname.split('/');
            this.productId = pathArray[pathArray.length - 1];
            
            // 加载商品详情
            this.getProductDetail();
            
            // 加载相关商品
            this.getRelatedProducts();
        },
        methods: {
            // 获取商品详情
            getProductDetail() {
                axios.get('product/detail/' + this.productId)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.product = res.data.extend.product;
                            document.title = this.product.productName + ' - 商品详情';
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        this.$message.error('获取商品详情失败');
                    });
            },
            
            // 获取相关商品
            getRelatedProducts() {
                axios.get('productES/getRelatedProducts/' + this.productId, {params: {size: 4}})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.relatedProducts = res.data.extend.list;
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    });
            },
            
            // 跳转到商品详情
            goToDetail(id) {
                if (id === this.productId) return;
                window.location.href = 'product/detail/' + id;
            }
        }
    });
</script>
</html> 